<template>
	<view class="box">
		<view class="card">
			<view class="card-title">
				领取优惠券
			</view>
			<scroll-view scroll-y="true" class="scroll">

				<view class="item-counp-box" v-for="(item,index) in list" :key="index">
					<view class="item-counp"
						:style="{background:'url('+ $BASE_URL + icon[8]+')',backgroundSize:'100% 100%'}">
						<view class="item-counp-l">
							<view class="counp-type">
								折扣券
							</view>
							<view class="" style="color: white;">
								<text style="font-size: 72rpx;">5</text><text style="font-size: 36rpx;">折</text>
							</view>
						</view>
						<view class="item-counp-r">
							<view class="item-counp-r1">
								iphone 14 系列首月5折
							</view>

							<view class="item-counp-r2">
								<view class="">
									有效期至：2022年4月24日
								</view>
								<view class="l-btn" @click="getcounp(item.id)" v-if="item.status_name !='已领取'">
									立即领取
								</view>
								<view class="use-btn">
									已领取
								</view>
							</view>
							<view class="item-counp-r3" @click="checkRules(index)">
								<view class="">
									使用规则
								</view>
								<image :src=" $BASE_URL + icon[9]" mode="aspectFill"></image>
							</view>
						</view>

					</view>


					<view class="rules" :class="{close:!item.rule_text,open:item.rule_text}" >

						<view class="rules-item">
							1、本券不可兑换现金，不可找零。
						</view>
						<view class="rules-item">
							2、如果消费并使用优惠券后，订单发生退款，优惠券无法退还。
						</view>
						<view class="rules-item">
							3、本券仅限指定产品使用。
						</view>
						<view class="rules-item">
							4、本券自领取后7日内可用。
						</view>
						<view class="rules-item">
							5、若优惠券未使用作废，不接受补领、减租金等其他形式优惠。
						</view>


					</view>
				</view>


			</scroll-view>
			<view class="footer">
				<view class="getbtn">
					一键领取
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			icon: {
				type: Array,
				default: () => {
					return []
				}
			},
			list:{
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				// list: [{
				// 		id: 1,
				// 		rule: false
				// 	},
				// 	{
				// 		id: 2,
				// 		rule: false
				// 	}
				// ]
			}
		},
		
		methods: {
			checkRules(i) {
				
				console.log(this.list);
				this.list[i].rule_text = !this.list[i].rule_text

			},
			getcounp(ids){
				var that = this
				that.$http(
					'coupons.get',
					{
						id: ids
					},
					'领取中...'
				).then(res => {
					if (res.code === 1) {
						that.$u.toast('领取成功');
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.card {

		width: 100%;
		height: 1000rpx;
		background-color: #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;

		.card-title {
			height: 88rpx;
			line-height: 88rpx;
			color: #3D3D3D;
			font-size: 32rpx;
			text-align: center;
		}

		.footer {
			width: 100%;
			height: 156rpx;
			position: fixed;
			bottom: 0;
			border-top: 2rpx solid gainsboro;


			.getbtn {
				width: 680rpx;
				height: 88rpx;
				border-radius: 100rpx;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
				line-height: 88rpx;
				margin: 10rpx auto;
				background: #FF4747;
			}

			.getbtn:active {
				background-color: #f13e3e;
			}
		}

		.scroll {
			height: 756rpx;
			// background-color: #efefef;
			padding: 26rpx;
			box-sizing: border-box;

			.item-counp-box {
				width: 700rpx;
				// height: 196rpx;
				min-height: 196rpx;
				margin-bottom: 34rpx;
				position: relative;

				.rules {
					width: 100%;
					background-color: #fff;
					padding-left: 22rpx;
					padding-bottom: 14rpx;
					padding-top: 0;
					transition: all 0.5s;
					border-radius: 12rpx;
					.rules-item {
						font-size: 22rpx;
						color: #999999;
						margin-bottom: 10rpx;
					}
				}

				.close {
					padding-top: 0;
				}

				.open {
					box-shadow: 0px 4px 16rpx 0px rgba(74, 21, 12, 0.08);
					padding-top: 206rpx;
				}
			}

			.item-counp {
				position: absolute;
				width: 700rpx;
				height: 196rpx;
				opacity: 1;
				box-shadow: 0px 4px 16rpx 0px rgba(74, 21, 12, 0.15);
				display: flex;
				border-radius: 12rpx;
				overflow: hidden;

				.item-counp-l {
					width: 204rpx;
					height: 196rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					position: relative;

					.counp-type {
						position: absolute;
						left: 14rpx;
						top: 10rpx;
						font-size: 24rpx;
						color: #fff;
					}
				}

				.item-counp-r {
					width: 496rpx;
					height: 196rpx;
					box-sizing: border-box;
					padding: 22rpx 22rpx 0rpx 22rpx;


					.item-counp-r1 {
						color: #333;
						font-size: 28rpx;
						margin-bottom: 16rpx;
					}

					.item-counp-r2 {
						font-size: 22rpx;
						color: #999;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.l-btn {
							width: 150rpx;
							height: 56rpx;
							line-height: 56rpx;
							text-align: center;
							font-size: 24rpx;
							font-weight: 500;
							color: #fff;
							border-radius: 42rpx;
							background: linear-gradient(110deg, #FF8166 -7%, #FA4528 97%);

						}

						.use-btn {
							width: 150rpx;
							height: 56rpx;
							line-height: 56rpx;
							text-align: center;
							font-size: 24rpx;
							font-weight: 500;
							color: #FB5049;
							border: 1rpx solid #FB5049;
							border-radius: 42rpx;
							background: #fff;
						}

						margin-bottom: 6rpx;
					}

					.item-counp-r3 {
						font-size: 24rpx;
						color: #999;
						display: flex;
					align-items: center;
						height: 60rpx;
						line-height: 60rpx;
						image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 20rpx;
						}
					}
				}

			}
		}
	}
</style>
